/* =====================================================================
   IBERIA MU - character equipment ("armory") and item tooltips
   Loaded after iberiamu-final.css. Uses the site's own palette.
   ===================================================================== */

:root{
  --ar-gold:#d6a23a;
  --ar-gold-bright:#f0c968;
  --ar-cream:#f2e5c6;
  --ar-ink:#0d0506;
  --ar-socket:#140708;
  --ar-line:rgba(214,162,58,.30);
  --ar-exc:#4fd884;
  --ar-anc:#3cc8d4;
  --ar-opt:#86b4ff;
}

/* ---------- panel ---------- */
.armory{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:22px 12px 16px;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(143,16,24,.22), transparent 62%),
    linear-gradient(180deg, rgba(22,3,5,.65), rgba(8,2,3,.85));
  border-radius:6px;
}

.armory-grid{
  display:grid;
  grid-template-columns:96px 46px 108px 46px 124px;
  grid-template-rows:108px 118px 52px 100px;
  grid-template-areas:
    "pet    pend   helm   wings  wings"
    "weapon .      armor  .      shield"
    "weapon ring1  armor  ring2  shield"
    "gloves .      pants  .      boots";
  gap:8px;
}

/* ---------- socket ---------- */
.armory-slot{
  position:relative;
  min-width:0;
  border-radius:6px;
  border:1px solid var(--ar-line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 40%),
    var(--ar-socket);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.65),
    inset 0 10px 22px rgba(0,0,0,.55);
  overflow:hidden;
}
.armory-slot.is-small{ align-self:center; height:46px; }
.armory-slot.is-small[style*="ring"]{ align-self:end; }

/* the light behind an item: its grade colour */
.armory-slot::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 56%, var(--ar-glow, transparent) 0%, transparent 68%);
  pointer-events:none;
}
.armory-slot.is-level{ --ar-glow:rgba(240,201,104,.20); border-color:rgba(240,201,104,.50); }
.armory-slot.is-exc  { --ar-glow:rgba(79,216,132,.30);  border-color:rgba(79,216,132,.60); }
.armory-slot.is-anc  { --ar-glow:rgba(60,200,212,.28);  border-color:rgba(60,200,212,.65); }

.armory-item{
  position:absolute;
  inset:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:help;
}
.armory-item img{
  display:block;
  max-width:100%;
  max-height:100%;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.85));
}
/* 1x1 icons are only 32px; give them a little more presence in the big sockets */
.armory-slot:not(.is-small) .armory-item img{
  min-width:48px;
  min-height:48px;
  object-fit:contain;
}
.armory-slot:hover{ border-color:var(--ar-gold-bright); }
.armory-slot.is-exc:hover{ border-color:var(--ar-exc); }
.armory-slot.is-anc:hover{ border-color:var(--ar-anc); }

.armory-level{
  position:absolute;
  top:4px;
  right:5px;
  font:700 11px/1 Roboto, Arial, sans-serif;
  color:var(--ar-gold-bright);
  text-shadow:0 1px 2px #000;
  pointer-events:none;
}

.armory-empty{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font:400 11px/1.2 Roboto, Arial, sans-serif;
  color:rgba(242,229,198,.26);
  text-align:center;
}
.armory-slot.is-empty{
  border-style:dashed;
  border-color:rgba(214,162,58,.14);
  background:rgba(20,7,8,.55);
  box-shadow:none;
}

/* extra slots (earrings / flag), only rendered when something is equipped */
.armory-extra{
  display:flex;
  gap:8px;
  justify-content:center;
}
.armory-extra .armory-slot{ width:64px; height:64px; }

/* legend */
.armory-legend{
  display:flex;
  gap:18px;
  margin:0;
  padding:0;
  list-style:none;
  font:400 12px/1 Roboto, Arial, sans-serif;
  color:rgba(242,229,198,.55);
}
.armory-legend li{ display:flex; align-items:center; gap:6px; }
.armory-legend i{
  width:9px; height:9px; border-radius:50%;
  display:inline-block;
}
.armory-legend .lg-exc{ background:var(--ar-exc); }
.armory-legend .lg-anc{ background:var(--ar-anc); }
.armory-legend .lg-lvl{ background:var(--ar-gold-bright); }

.armory-hidden{
  padding:28px 12px;
  text-align:center;
  font:400 13px/1.5 Roboto, Arial, sans-serif;
  color:rgba(242,229,198,.6);
}

@media (max-width:520px){
  .armory-grid{
    grid-template-columns:72px 36px 84px 36px 94px;
    grid-template-rows:86px 96px 44px 80px;
    gap:6px;
  }
  .armory-slot.is-small{ height:38px; }
}
@media (prefers-reduced-motion:no-preference){
  .armory-slot{ transition:border-color .15s ease; }
}

/* =====================================================================
   Item tooltip (jquery.tooltip -> #tooltip), MU-style colours.
   Class names are the ones DmN's lib.iteminfo.php emits.
   ===================================================================== */
#tooltip{
  position:absolute;
  z-index:3000;
  min-width:230px;
  max-width:330px;
  padding:10px 14px 9px;
  background:rgba(9,3,4,.97);
  border:1px solid rgba(214,162,58,.50);
  border-radius:4px;
  box-shadow:0 0 0 1px rgba(0,0,0,.9), 0 12px 32px rgba(0,0,0,.65);
  color:#d2c8b6;
  font:12px/1.55 Tahoma, Verdana, Arial, sans-serif;
  text-align:center;
  opacity:1 !important;
}
#tooltip h3:empty, #tooltip .url:empty{ display:none; }
#tooltip h3, #tooltip div{ margin:0; }
#tooltip .item_font_family{ font-family:Tahoma, Verdana, Arial, sans-serif; }
#tooltip .item_size_12{ font-size:12px; }

/* item name */
#tooltip .item_white{ color:#f4efe6; }
#tooltip .item_white.item_size_12:first-child,
#tooltip .item_yellow_title,
#tooltip .item_exe_title,
#tooltip .item_socket_title,
#tooltip .item_socket_exe_title,
#tooltip .item_ancient_title{ font-size:13px; font-weight:700; }
#tooltip .item_yellow_title{ color:var(--ar-gold-bright); }
#tooltip .item_exe_title{ color:var(--ar-exc); }
#tooltip .item_socket_title{ color:#c79bff; }
#tooltip .item_socket_exe_title{ color:#b48bff; }
#tooltip .item_ancient_title{ color:#8ff0b8; }
#tooltip .item_ancient_background{
  display:inline-block;
  padding:1px 8px;
  background:rgba(34,86,150,.55);
  border-radius:2px;
}

/* options */
#tooltip .item_light_blue,
#tooltip .item_luck,
#tooltip .item_exc_options{ color:var(--ar-opt); }
#tooltip .item_light_blue_2{ color:#a9c8ff; }
#tooltip .item_blue{ color:#5f8fff; }
#tooltip .item_yellow{ color:var(--ar-gold-bright); }
#tooltip .item_yellow_2{ color:#e8d688; }
#tooltip .item_light_green{ color:#7fe0a3; }
#tooltip .item_grey{ color:#8a7f74; }
#tooltip .item_pink{ color:#ff8fd6; }
#tooltip .item_purple,
#tooltip .item_socket{ color:#c79bff; }
#tooltip .item_red{ color:#ff6060; }
#tooltip .item_dark_red{ color:#cc4040; }
#tooltip .item_dark_red_background{
  display:inline-block;
  margin:2px 0;
  padding:1px 8px;
  background:rgba(143,16,24,.38);
  border-radius:2px;
}
#tooltip .item_exc_options{ margin-top:2px; }